<template>
    <div>
        <el-row>
            <el-col :span="6" :offset="6" style="padding: 5px">
                <el-input v-model="empName" placeholder="请输入员工姓名"></el-input>
            </el-col>
            <el-col :span="12" style="padding: 5px">
                <el-date-picker type="year" v-model="date"></el-date-picker>
                <el-button style="margin-left: 5px" type="primary" @click="initPoints">查询</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div ref="main" style="width: 100%;height: 600px">

                </div>
            </el-col>
        </el-row>
    </div>

</template>

<script>
    import * as echarts from 'echarts'
    export default {
        name: "StaScore",
        data:function () {
            return {
                date: '2020',
                empName: '江南一点雨',
                points: []
            }
        },
        methods:{
            initPoints(){
                var myChart = echarts.init(this.$refs.main)
                this.$getRequest('/vhr/points?name=' + this.empName + '&date=' + this.date)
                    .then(res=>{
                        if (res){
                            console.log(res.obj);
                            myChart.setOption({
                                title: {
                                    text: res.obj[0].ename + '积分'
                                },
                                tooltip: {},
                                xAxis: {
                                    data: ['1月', '2月', '3月', '4月', '5月',
                                        '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                                },
                                yAxis: {},
                                series: [{
                                    name: '积分',
                                    type: 'bar',
                                    data: res.obj.map(res=>{return res.ecPoint})
                                }]
                            });
                        }
                    })
            }
        }
    }
</script>

<style scoped>

</style>